<?xml version="1.0" encoding="ISO-8859-1" ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/pageUtils/template.xhtml">

	<ui:define name="body">
		<h:form id="form">

			<p:growl id="growl" showDetail="true" />

			<p:dataTable id="cars" var="car" value="#{tableBean.mediumCarsModel}"
				paginator="true" rows="10" selection="#{tableBean.selectedCar}"
				selectionMode="single">

				<p:ajax event="rowSelect" listener="#{tableBean.onRowSelect}"
					update=":form:display :form:growl" oncomplete="carDialog.show()" />
				<p:ajax event="rowUnselect" listener="#{tableBean.onRowUnselect}"
					update=":form:growl" />

				<f:facet name="header">
            Select a row to display a message
        </f:facet>

				<p:column headerText="Model">
            #{car.model}
        </p:column>

				<p:column headerText="Year">
            #{car.year}
        </p:column>

				<p:column headerText="Manufacturer">
            #{car.manufacturer}
        </p:column>

				<p:column headerText="Color">
            #{car.color}
        </p:column>
			</p:dataTable>

			<p:dialog id="dialog" header="Car Detail" widgetVar="carDialog"
				resizable="false" showEffect="explode" hideEffect="explode">

				<h:panelGrid id="display" columns="2" cellpadding="4">

					<f:facet name="header">
						<p:graphicImage
							value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg" />
					</f:facet>

					<h:outputText value="Model:" />
					<h:outputText value="#{tableBean.selectedCar.model}" />

					<h:outputText value="Year:" />
					<h:outputText value="#{tableBean.selectedCar.year}" />

					<h:outputText value="Manufacturer:" />
					<h:outputText value="#{tableBean.selectedCar.manufacturer}" />

					<h:outputText value="Color:" />
					<h:outputText value="#{tableBean.selectedCar.color}" />
				</h:panelGrid>
			</p:dialog>

		</h:form>

	</ui:define>
</ui:composition>